<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东旅游网</title>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    
    <script type="text/javascript">
        window.onload = function() {
            var map = new AMap.Map('container', {
                center: [117, 36.65], 
                zoom: 8
            });
            AMap.plugin('AMap.ToolBar', function() {
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar);
            });
        };
    </script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f2f458f11162ec70b3b2e09c329a7e1c"></script> 

</head>
<body>
    <header>
        <div class="logo">山东旅游网</div>
        <nav>
            <ul>
                <li><a href="customer.jsp">首页</a></li>
                <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                <li><a href="infomation.jsp">资讯</a></li>
                <li><a href="scenicspots.jsp">景点</a></li>
                <li><a href="ticketpurchase.jsp">购票</a></li>
            </ul>
        </nav>
     
        <nav class="user-actions">
            <ul>
            	<li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li> 
                <li><a href="userinfo.jsp">个人信息</a></li>
                <li><a href="SalesRecordServlet?userID=${userInfo.userID}&usermemberLevel=${userInfo.memberLevel}">消费记录</a></li>
                <li><a href="#">留言与回复</a></li>
                <li><a href="login.jsp">退出</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="main-content">
        <div class="image-container">
            <img src="./images/DiBiao_ShanDong.jpg" alt="山东省">
        </div>
        <div class="description-container">
            <h2>山东省简介</h2>
            <p>
                山东，因居太行山以东而得名，简称“鲁”，省会济南。先秦时期隶属齐国、鲁国，故而别名齐鲁。山东地处华东沿海、黄河下游、京杭大运河中北段，是华东地区的最北端省份。
                西部连接内陆，从北向南分别与河北、河南、安徽、江苏四省接壤；中部高突，泰山是全境最高点；东部山东半岛伸入黄海，北隔渤海海峡与辽东半岛相对、拱卫京津与渤海湾，东隔黄海与朝鲜半岛相望，东南则临靠较宽阔的黄海、遥望东海及日本南部列岛。
                山东是儒家文化发源地，儒家思想的创立人孔子、孟子，以及墨家思想的创始人墨子、军事家吴起等，均出生于鲁国。姜太公在临淄（今淄博市临淄区）建立齐国，成就了齐桓公、管仲、晏婴、鲍叔牙、孙武、孙膑等一大批志士名人；齐国还创建了世界上第一所官方举办、私家主持的高等学府——稷下学宫。
            </p>
        </div>
    </section>

    <div id="container"></div> 

</body>
<style>
    
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
    }

    header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .logo {
        color: orange;
        font-size: 24px;
        font-weight: bold;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        text-decoration: none;
        color: gray;
    }

    nav ul li a:hover {
        color: black;
    }

    .main-content {
        display: flex;
        padding: 20px;
    }

    .image-container {
        flex: 1;
        margin-right: 20px;
    }

   .image-container img {
        width: 100%;
        height: 300px;
    }

    .description-container {
        flex: 1;
    }

    #container {
        width:100%; 
        height: 500px; 
    }  
</style>

</html>